import React, { Component } from 'react'
import { HeaderInner, List } from './style'
import { Breadcrumb, Dropdown } from 'antd'
import {
  UserOutlined,
  SettingOutlined,
  LogoutOutlined
} from '@ant-design/icons'

export default class Header extends Component {
  createOverlay = () => {
    return (
      <List>
        <li>
          <UserOutlined />
          <span>个人中心</span>
        </li>
        <li>
          <SettingOutlined />
          <span>个人设置</span>
        </li>
        <li>
          <LogoutOutlined />
          <span>退出登录</span>
        </li>
      </List>
    )
  }

  render() {
    return (
      <HeaderInner>
        <div className="left">
          <Breadcrumb>
            <Breadcrumb.Item>控制台</Breadcrumb.Item>
            <Breadcrumb.Item>用户管理</Breadcrumb.Item>
            <Breadcrumb.Item>用户列表</Breadcrumb.Item>
          </Breadcrumb>
        </div>
        <div className="right">
          <Dropdown overlay={this.createOverlay()}>
            <div className="user-info">
              <span className="avatar"></span>
              <span className="username">张三</span>
            </div>
          </Dropdown>
        </div>
      </HeaderInner>
    )
  }
}
